<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据统计</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="traffic" style="min-height:400px;"></div>
					</div>
				</div>
			</div>
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="attackType" style="min-height:400px;"></div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['form','util','jquery','popup','echarts'], function(){
				var $ = layui.$;
				var form = layui.form;
				var layer = layui.layer;
				var util = layui.util;
				var popup = layui.popup;
				let echarts = layui.echarts;

				var trafficChart = echarts.init(document.getElementById('traffic'));
				trafficOption = {
					legend: {
						icon: 'rect',
						type: 'scroll',
						orient: 'vertical',
						right: 10,
						top: 40,
						bottom: 20,
					},
					tooltip: {
						trigger: 'axis',
						position: function (pt) {
							return [pt[0], '10%'];
						}
					},
					dataset: {
						source: []
					},
					title: {
						left: 'center',
						top: 10,
						text: '请求流量'
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						name: '时间',
						type: 'category',
						axisLabel: {
							interval: 0,
							rotate: 50,
							margin: 10,
							formatter: function (value, index) {
								return value.substring(11, 13) + '点';
							}
						}
					},
					yAxis: {
						name: '请求量',
					},
					series: [
						{
							name: '请求量',
							type: 'line',
							smooth: true,
							areaStyle: { opacity: 0.1 }
						},
						{
							name: '攻击请求量',
							type: 'line',
							smooth: true,
							areaStyle: { opacity: 0.1 },
							itemStyle: { color: '#FF5722' }
						}
					]
				};

				trafficChart.setOption(trafficOption);

				var attackTypeChart = echarts.init(document.getElementById('attackType'));
				trafficTypeOption = {
					legend: {
						icon: 'rect',
						type: 'scroll',
						orient: 'vertical',
						right: 10,
						top: 40,
						bottom: 20,
						formatter: function (name) {
							name = name.substring(name.lastIndexOf('_') + 1, name.length)
							return name
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: function (params) {
							var name = params.name
							name = name.substring(name.lastIndexOf('_') + 1, name.length)
							return name + ': ' + params.value + ' ' + params.percent + '%'
						}
					},
					title: {
						left: 'center',
						top: 10,
						text: '攻击类型统计',
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					series: [
						{
							name: '请求量',
							type: 'pie',
							radius: '50%',
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
							label: {
								formatter: function (params) {
									var name = params.name
									name = name.substring(name.lastIndexOf('_') + 1, name.length)
									return name + ': ' + params.percent + '%'
								}
							},
							data: []
						}
					]
				};

				attackTypeChart.setOption(trafficTypeOption);

				$.get('/dashboard', function (data) {
					if (data && data.code == 200) {
						trafficChart.setOption({
							dataset: {
								source: JSON.parse(data.data.trafficData)
							}
						});

						attackTypeChart.setOption({
							series: [
								{
									data: JSON.parse(data.data.attackTypeData)
								}
							]
						});
						return true;
					} else {
						popup.failure(data.msg);
						return false;
					}
				}, "json");

				window.onresize = function() {
					trafficChart.resize();
					attackTypeChart.resize();
				}
			});
		</script>
	</body>
</html>
